class Slide {
  //配置
  constructor(config) {
    this.config = config
    this.el = document.querySelector(config.el)
    this.el.style.width = `${config.width}px`
    this.el.style.height = `${config.height}px`
    this.sections = []
  }
  //基本工作
  run() {
    this.createSection()
    this.createSectionDiv()
  }

  createSection() {
    for (let i = 0; i < this.config.limit; i++) {
      let section = document.createElement('section')
      section.style.width = `${this.width()}px`
      section.style.height = `${this.config.height}px`
      this.sections.push(section)
      this.el.insertAdjacentElement('beforeEnd', section)
    }
  }

  createSectionDiv() {
    function create(sectionIndex, section) {
      for (const divIndex of [0]) {
        let div = document.createElement('div')
        div.style.width = `${this.width()}px`
        div.style.height = `${this.config.height}px`
        section.insertAdjacentElement('beforeEnd', div)

        this.createImage(div, sectionIndex, divIndex)
      }
    }
    for (const [index, section] of this.sections.entries()) {
      create.call(this, index, section)
    }
  }

  createImage(div, sectionIndex, divIndex) {
    let img = document.createElement('img')
    img.src = this.config.images[divIndex]
    img.style.width = `${this.config.width}px`
    img.style.height = `${this.config.height}px`
    img.style.transform = `translateX(-${this.width() * sectionIndex}px)`
    div.insertAdjacentElement('beforeEnd', img)
  }

  width() {
    return this.config.width / this.config.limit
  }
}
